<template>
  <div class="summary">
    <div class="summary-left">
      <el-scrollbar>
        <div class="summary-left-detail">
          <div class="title">{{ detail.name }}</div>
          <div class="info">
            <span> {{ detail.createName }}&nbsp;&nbsp;创建于&nbsp;&nbsp;{{ dayJs(detail.gmtCreate).format("YYYY-MM-DD") }} </span>
            <span>项目编号：{{ detail.code }}</span>
            <span>项目类型：{{ getDictItem("projectTypeId", detail.typeId) }}</span>
            <span>当前阶段：{{ detail.code }}</span>
          </div>
          <ul class="options">
            <li>
              <UpDate class="li" type="dropdown" :config="userConfig">
                <span class="flag"><img :src="urlResource + detail.avatarUrl" /></span>
                <span class="titles">
                  <i>{{ detail.userName }}</i>
                  <i>项目经理</i>
                </span>
              </UpDate>
            </li>
            <li>
              <UpDate class="li" type="date" :config="planStartConfig">
                <span class="calendar"><Calendar /></span>
                <span class="titles">
                  <i>{{ detail.planStartTime ? dayJs(detail.planStartTime).format("YYYY-MM-DD") : "--" }}</i>
                  <i>计划开始时间</i>
                </span>
              </UpDate>
            </li>
            <li>
              <UpDate class="li" type="date" :config="planEndConfig">
                <span class="calendar"><Calendar /></span>
                <span class="titles">
                  <i>{{ detail.planEndTime ? dayJs(detail.planEndTime).format("YYYY-MM-DD") : "--" }}</i>
                  <i>计划结束时间</i>
                </span>
              </UpDate>
            </li>
            <li>
              <UpDate class="li" type="date" :config="startConfig">
                <span class="calendar"><Calendar /></span>
                <span class="titles">
                  <i>{{ detail.startTime ? dayJs(detail.startTime).format("YYYY-MM-DD") : "--" }}</i>
                  <i>开始时间</i>
                </span>
              </UpDate>
            </li>
            <li>
              <UpDate class="li" type="date" :config="endConfig">
                <span class="calendar"><Calendar /></span>
                <span class="titles">
                  <i>{{ detail.endTime ? dayJs(detail.endTime).format("YYYY-MM-DD") : "--" }}</i>
                  <i>结束时间</i>
                </span>
              </UpDate>
            </li>
          </ul>
          <div class="kh-info">
            <span>客户名称</span>
            <span>{{ detail.companyFinalName }}</span>
          </div>
        </div>
        <div class="summary-left-project">
          <div class="project-title">
            <span>项目成员</span>
            <span @click="addMemberFn">
              <i><Plus /></i>
              <i>添加成员</i>
            </span>
          </div>
          <div class="project-content">
            <el-table
              :data="detail.userModels"
              border
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              class="table"
            >
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column prop="user" label="成员" width="300">
                <template #default="scope">
                  <div v-if="scope.row.isEdit">
                    <el-select v-model="scope.row.userId" placeholder="请选择人员" clearable filterable>
                      <el-option v-for="item in listAllUser" :key="item.name" :label="item.name" :value="item.id" />
                    </el-select>
                  </div>
                  <div class="user-wrap" v-else>
                    <img :src="urlResource + scope.row.avatarUrl" alt="" />
                    <span>{{ scope.row.userName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="typeId" label="角色">
                <template #default="scope">
                  <div class="table-cell" v-if="scope.row.isEdit">
                    <el-select v-model="scope.row.typeId" placeholder="请选择角色" clearable filterable>
                      <el-option v-for="item in getDict('projectMember')" :key="item.name" :label="item.name" :value="item.id" />
                    </el-select>
                  </div>
                  <div v-else>{{ getDictItem("projectMember", scope.row.typeId) }}</div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                  <el-button v-if="!scope.row.isEdit" link type="primary" size="small" @click.prevent="editMember(scope.row)">
                    编辑
                  </el-button>
                  <el-button v-else link type="primary" size="small" @click.prevent="saveMember(scope.row)">保存</el-button>
                  <el-button
                    v-if="scope.row.isEdit"
                    link
                    type="danger"
                    size="small"
                    @click.prevent="cancelMember(scope.row, scope.$index)"
                  >
                    取消
                  </el-button>
                  <el-button v-if="!scope.row.isEdit" link type="warning" size="small" @click.prevent="deleteMember(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="summary-left-milestone">
          <div class="milestone-title">里程碑</div>
          <div class="milestone-content">
            <el-scrollbar style="height: 100%" ref="refScrollbar" @wheel.prevent="handleScroll">
              <ul class="milestone-list">
                <li class="line-start"><i></i></li>
                <li
                  :class="{ active: item.status === '1790295418777632768' }"
                  v-for="(item, index) in detail.taskModels?.filter(item => item.markerId)"
                  :key="index"
                >
                  <!-- ?.filter(item => item.markerId) -->
                  <span>{{ item.name }}</span>
                  <span class="line"><i></i><i></i></span>
                  <span>{{ getDictItem("taskStatus", item.status) }}</span>
                  <span>{{ dayJs(detail.planEndTime).format("YYYY年MM月DD") }}</span>
                </li>
                <li class="line-end"><i></i></li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
        <div class="summary-left-project">
          <div class="project-title">
            <span>硬件定制信息</span>
            <span @click="addHardStandard">
              <i><EditPen /></i>
              <i>编辑</i>
            </span>
          </div>
          <div class="project-content-wrap" v-if="detail.hardwareNonStandard">
            <div class="project-content-item">
              <span class="title">硬件定制周期</span>
              <span class="content fontWeight">{{ detail.hardwareCycle || "--" }}天</span>
            </div>
            <div class="project-content-item">
              <span class="title">定制内容</span>
              <span class="content">
                {{ detail.hardwareContent || "--" }}
              </span>
            </div>
          </div>
          <div v-else class="empty-box">暂无定制信息</div>
        </div>
        <div class="summary-left-project">
          <div class="project-title">
            <span>软件定制信息</span>
            <span @click="addHardSoftware">
              <i><EditPen /></i>
              <i>编辑</i>
            </span>
          </div>
          <div class="project-content-wrap" v-if="detail.softwareNonStandard">
            <div class="project-content-item">
              <span class="title">软件定制周期</span>
              <span class="content fontWeight">{{ detail.softwareCycle || "--" }}天</span>
            </div>
            <div class="project-content-item">
              <span class="title">定制内容</span>
              <span class="content">
                {{ detail.softwareContent || "--" }}
              </span>
            </div>
          </div>
          <div v-else class="empty-box">暂无定制信息</div>
        </div>
        <div class="summary-left-project">
          <div class="project-title">
            <span>AGV信息</span>
            <span @click="addAgvFn">
              <i><Plus /></i>
              <i>添加车辆</i>
            </span>
          </div>
          <div class="project-content">
            <el-table
              :data="detail.productModels"
              border
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              class="table"
            >
              <el-table-column prop="code" label="车辆编号" />
              <el-table-column prop="productCategoryName" label="车辆类型"> </el-table-column>
              <el-table-column prop="serialNumber" label="序列号"> </el-table-column>
              <el-table-column prop="name" label="车辆名称"> </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                  <el-button link type="warning" size="small" @click.prevent="deleteAgv(scope.row)"> 删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="summary-right">
      <div class="summary-right-project">
        <div class="title">
          <span>项目状态</span>
          <p>
            <span @click="updateProjectStatusFn">
              <SvgIcon name="gengxin" />
              <i class="el-icon-s-promotion">更新</i>
            </span>
            <!-- <span>
              <SvgIcon name="xianxingdaoyu" />
              <i class="el-icon-s-promotion">历史</i>
            </span> -->
          </p>
        </div>
        <p class="status">
          <span>当前状态</span>
          <span
            :class="{
              green: detail.status === '1790295879995883520',
              red: detail.status === '1790295925667659776',
              yellow: detail.status === '1790295903769198592'
            }"
          >
            {{ getDictItem("projectStatus", detail.status) }}
          </span>
        </p>
        <p class="description">
          <span>状态描述</span>
          <span>{{ detail.statusDescription || "暂无描述" }}</span>
        </p>
      </div>
      <div class="summary-right-total">
        <span class="total-tit">任务统计</span>
        <div class="total-list">
          <p>
            <span>任务总数</span>
            <span>{{ taskTotal.total }}</span>
          </p>
          <p>
            <span>已完成</span>
            <span>{{ taskTotal.finished }}</span>
          </p>
          <p>
            <span>进行中</span>
            <span>{{ taskTotal.running }}</span>
          </p>
          <p>
            <span>未开始</span>
            <span>{{ taskTotal.notStarted }}</span>
          </p>
          <p>
            <span>延期任务</span>
            <span>{{ taskTotal.delay }}</span>
          </p>
          <p>
            <span>今日到期</span>
            <span>{{ taskTotal.today }}</span>
          </p>
          <p>
            <span>完成率</span>
            <span class="complate-rate">{{ taskTotal.completionRate }}%</span>
          </p>
          <p>
            <span>延期率</span>
            <span class="delay-rate">{{ taskTotal.delayRate }}%</span>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div v-if="drawerVisible">
    <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" :project-id="projectId" @change="refresh" />
  </div>
</template>
<script lang="ts" setup>
import { inject, onMounted, ref, computed } from "vue";
import { Plus, Calendar, EditPen } from "@element-plus/icons-vue";
import { useDict } from "@/hooks/useDict";
import Dialog from "../components/Dialog.vue";
import UpDate from "../components/UpDate/index.vue";
import dayJs from "dayjs";
// api
import {
  getTaskStatistics,
  getProjectDetail,
  addProjectUser,
  updateProjectUser,
  deleteProjectUser,
  addProjectProduct,
  deleteProjectProduct,
  updateProjectStatus,
  updateProjectHardware,
  updateProjectSoftware,
  updateProjectPlanTime,
  updateProjectUserId
} from "@/api/modules/project";
import { getListProductUnbound } from "@/api/modules/agv";
import { getListAllUser } from "@/api/modules/sys";
import { ElMessage } from "element-plus";
// hook
const { getDictItem, getDict } = useDict(["projectStatus", "projectTypeId", "taskStatus", "projectMember", "productId"]);
import { useHandleData } from "@/hooks/useHandleData";
// 变量
const urlResource = window?.staticConfig.urlResource;
const projectId = inject("projectId");
const detail = ref<any>({});
const refScrollbar = ref(null);
const listAllUser = ref<any>([]);
let drawerVisible = ref(false);
let taskTotal = ref<any>({});
let agvList = ref<any>([]);
let config = ref<any>({
  width: 24
});
const userConfig = computed(() => {
  return {
    data: { id: projectId, userId: detail.value.userId },
    other: { options: listAllUser.value },
    key: "userId",
    api: updateProjectUserId,
    successCallback: () => {
      ElMessage.success("修改成功");
      refresh();
    }
  };
});
const planStartConfig = computed(() => {
  return {
    data: { id: projectId, planStartTime: detail.value.planStartTime },
    key: "planStartTime",
    api: updateProjectPlanTime,
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      ElMessage.success("修改成功");
      refresh();
    }
  };
});
const planEndConfig = computed(() => {
  return {
    data: { id: projectId, planEndTime: detail.value.planEndTime },
    key: "planEndTime",
    api: updateProjectPlanTime,
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      ElMessage.success("修改成功");
      refresh();
    }
  };
});
const startConfig = computed(() => {
  return {
    data: { id: projectId, startTime: detail.value.startTime },
    key: "startTime",
    api: updateProjectPlanTime,
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      ElMessage.success("修改成功");
      refresh();
    }
  };
});
const endConfig = computed(() => {
  return {
    data: { id: projectId, endTime: detail.value.endTime },
    key: "endTime",
    api: updateProjectPlanTime,
    attributes: {
      type: "date",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    },
    successCallback: () => {
      ElMessage.success("修改成功");
      refresh();
    }
  };
});
// 方法
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};
const handleScroll = e => {
  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
  const scrollbar = refScrollbar.value;
  // scrollbar.wrap$获取到包裹容器的element对象
  scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft - wheelDelta);
};
const getTaskStatisticsFn = async () => {
  try {
    const { data } = await getTaskStatistics({ projectId });
    taskTotal.value = data;
  } catch (error) {
    console.log(error);
  }
};

// 获取项目详情
const getProjectDetailFn = async id => {
  const { data } = await getProjectDetail({ id });
  detail.value = data;
};
/**项目成员 */
const addMemberFn = async () => {
  detail.value.userModels.push({
    userId: "",
    typeId: "",
    isEdit: true
  });
};
const editMember = row => {
  row.isEdit = true;
};
const saveMember = async row => {
  try {
    delete row.isEdit;
    row.projectId = projectId;
    row.id ? await updateProjectUser(row) : await addProjectUser(row);
    ElMessage.success(row.id ? "编辑成功" : "保存成功");
    getProjectDetailFn(projectId);
  } catch (error) {
    console.log(error);
  }
};
const deleteMember = async row => {
  await useHandleData(deleteProjectUser, { id: row.id }, `删除【${row.userName}】`);
  getProjectDetailFn(projectId);
};
const cancelMember = (row, index) => {
  row.isEdit = false;
  if (!row.id) detail.value.userModels.splice(index, 1);
};
/**
 * AGV信息
 */
const getListProductUnboundFn = async () => {
  const { data } = await getListProductUnbound();
  agvList.value = data;
  console.log(agvList.value);
};
const addAgvFn = () => {
  drawerVisible.value = true;
  config.value.title = "添加AGV";
  config.value.form = {
    formData: {
      projectId,
      productId: "",
      code: ""
    },
    rules: {
      productId: [{ required: true, message: "请选择车辆" }],
      code: [{ required: true, message: "请填写车辆编号" }]
    }
  };
  config.value.column = [
    {
      type: "select",
      key: "productId",
      formItemAttribute: {
        label: "车辆"
      },
      attributes: {
        placeholder: "请选择车辆",
        options: agvList.value,
        multiple: false,
        filterable: true,
        clearable: true
      }
    },
    {
      type: "input",
      key: "code",
      formItemAttribute: {
        label: "车辆编号"
      },
      attributes: {
        placeholder: "请填写车辆编号"
      }
    }
  ];
  config.value.api = addProjectProduct;
  config.value.transformData = data => {
    return [data];
  };
  config.value.message = "添加成功";
};
const deleteAgv = async row => {
  await useHandleData(deleteProjectProduct, { id: row.id }, "删除成功");
  refresh();
};
const refresh = () => {
  getProjectDetailFn(projectId);
};
/** 修改项目状态和状态描述 */
const updateProjectStatusFn = () => {
  drawerVisible.value = true;
  config.value.title = "项目状态更新";
  config.value.form = {
    formData: {
      id: projectId,
      status: "",
      statusDesc: ""
    },
    rules: {
      status: [{ required: true, message: "请选择项目状态" }],
      statusDesc: [{ required: false, message: "请填写车项目状态" }]
    }
  };
  config.value.column = [
    {
      type: "select",
      key: "status",
      formItemAttribute: {
        label: "项目状态"
      },
      attributes: {
        placeholder: "请选择项目状态",
        options: getDict("projectStatus"),
        multiple: false,
        filterable: true,
        clearable: true
      }
    },
    {
      type: "input",
      key: "statusDesc",
      formItemAttribute: {
        label: "状态描述"
      },
      attributes: {
        placeholder: "请填写状态描述",
        type: "textarea"
      }
    }
  ];
  config.value.api = updateProjectStatus;
  config.value.message = "更新状态成功";
};
/** 硬件定制信息 */
const addHardStandard = () => {
  drawerVisible.value = true;
  config.value.title = "硬件定制信息编辑";
  config.value.form = {
    formData: {
      id: projectId,
      hardwareCycle: detail.value.hardwareCycle,
      hardwareContent: detail.value.hardwareContent,
      hardwareNonStandard: detail.value.hardwareNonStandard
    },
    rules: {
      hardwareCycle: [{ required: true, message: "请填写周期" }],
      hardwareContent: [{ required: true, message: "请填写类容" }]
    }
  };
  config.value.column = [
    {
      type: "switch",
      key: "hardwareNonStandard",
      formItemAttribute: {
        label: "硬件非标"
      },
      attributes: {}
    },
    {
      type: "input-number",
      key: "hardwareCycle",
      formItemAttribute: {
        label: "硬件非标定制周期（天）"
      },
      attributes: {
        placeholder: "请填写硬件非标定制周期（天）"
      }
    },
    {
      type: "input",
      key: "hardwareContent",
      formItemAttribute: {
        label: "硬件非标定制内容"
      },
      attributes: {
        placeholder: "请填写硬件非标定制内容",
        type: "textarea"
      }
    }
  ];
  config.value.api = updateProjectHardware;
  config.value.message = "更新状态成功";
};

/**软件定制信息 */
const addHardSoftware = () => {
  drawerVisible.value = true;
  config.value.title = "软件定制信息编辑";
  config.value.form = {
    formData: {
      id: projectId,
      softwareCycle: detail.value.softwareCycle,
      softwareContent: detail.value.softwareContent,
      softwareNonStandard: detail.value.softwareNonStandard
    },
    rules: {
      softwareCycle: [{ required: true, message: "请填写周期" }],
      softwareContent: [{ required: true, message: "请填写类容" }]
    }
  };
  config.value.column = [
    {
      type: "switch",
      key: "softwareNonStandard",
      formItemAttribute: {
        label: "软件非标"
      },
      attributes: {}
    },
    {
      type: "input-number",
      key: "softwareCycle",
      formItemAttribute: {
        label: "软件非标定制周期（天）"
      },
      attributes: {
        placeholder: "请填写软件非标定制周期（天）"
      }
    },
    {
      type: "input",
      key: "softwareContent",
      formItemAttribute: {
        label: "软件非标定制内容"
      },
      attributes: {
        placeholder: "请填写软件非标定制内容",
        type: "textarea"
      }
    }
  ];
  config.value.api = updateProjectSoftware;
  config.value.message = "更新状态成功";
};
onMounted(() => {
  getProjectDetailFn(projectId);
  getTaskStatisticsFn();
  getListAllUserFn();
  getListProductUnboundFn();
});
</script>
<style lang="scss" scoped>
ul,
li,
p {
  padding: 0;
  margin: 0;
  list-style: none;
}
i {
  font-style: normal;
}
.el-select-dropdown__item {
  padding: 0 32px 0 20px;
}
.summary {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .summary-left {
    flex: 1;
    overflow: hidden;

    // height: 0;
    .summary-left-detail {
      box-sizing: border-box;
      height: 258px;
      padding: 30px;
      background: #ffffff;
      .title {
        margin-bottom: 3px;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
      .info {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        span {
          margin-right: 30px;
        }
      }
      .options {
        display: flex;
        margin-top: 34px;
        .li {
          display: flex;
          align-items: center;
          margin-right: 114px;
          .flag {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .titles {
            display: flex;
            flex-flow: column nowrap;
            i:first-child {
              font-size: 14px;
              font-weight: 400;
              color: #333333;
            }
            i:last-child {
              margin-top: 2px;
              font-size: 12px;
              font-weight: 400;
              color: #999999;
            }
          }
          .calendar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin-right: 10px;
            font-size: 16px;
            color: #999999;
            border: 1px dashed #cccccc;
            border-radius: 50%;
            svg {
              width: 16px;
              height: 16px;
            }
          }
        }
        .li:hover {
          color: $primary-color;
          .calendar {
            color: $primary-color;
            border: 1px dashed $primary-color;
          }
        }
      }
      .kh-info {
        display: flex;
        flex-flow: column nowrap;
        margin-top: 30px;
        span:first-child {
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 20px;
          color: #999999;
        }
        span:last-child {
          font-size: 16px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    .summary-left-project {
      margin-top: 10px;
      background: #ffffff;
      .project-title {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding: 0 30px;
        span:first-child {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
        }
        span:last-child {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          cursor: pointer;
          i:first-child {
            width: 15px;
            height: 15px;
            margin-right: 10px;
            font-size: 15px;
            color: #666666;
          }
        }
      }
      .project-content {
        padding: 20px 30px 30px;
        .user-wrap {
          display: flex;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            border-radius: 50%;
          }
          span:last-child {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .project-content-wrap {
        padding: 0 30px 20px;
        .project-content-item {
          display: flex;
          flex-flow: column nowrap;
          .title {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          .fontWeight {
            font-size: 16px;
          }
          .content {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .empty-box {
        padding: 0 30px 20px;
        font-size: 14px;
        color: var(--el-text-color-secondary);
        text-align: center;
      }
    }
    .summary-left-milestone {
      padding: 30px;
      margin-top: 10px;
      background: #ffffff;
      .milestone-title {
        height: 72px;
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 600;
        line-height: 72px;
        color: #333333;
      }
      .milestone-content {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex: 1;
        justify-content: center;
        overflow: hidden;
        .milestone-list {
          position: relative;
          display: flex;
          width: max-content;

          // gap: 60px;
          .line-start {
            position: absolute;
            top: 34px;
            left: 0;
            z-index: 2;
            width: 20px;
            height: 20px;
            background: #ffffff;
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 8px;
              height: 8px;
              margin-top: -4px;
              margin-left: -4px;
              border: 1px solid #7499f8;
              border-radius: 50%;
            }
          }
          .line-end {
            position: absolute;
            top: 34px;
            right: -30px;
            z-index: 2;
            width: 20px;
            height: 20px;
            background: #ffffff;
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 8px;
              height: 8px;
              margin-top: -4px;
              margin-left: -4px;
              background: #c7cedb;
              border-radius: 50%;
            }
          }
          li {
            display: flex;
            flex: 0 0 auto;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            margin-right: 60px;
            span:first-child {
              box-sizing: border-box;
              height: 28px;
              padding: 0 22px;
              margin-bottom: 8px;
              font-size: 14px;
              font-weight: 400;
              line-height: 28px;
              color: #5378f6;
              text-align: center;
              border: 1px solid #5378f6;
              border-radius: 4px;
            }
            .line {
              position: relative;
              width: 100%;
              height: 2px;
              padding: 0 30px;
              margin: 8px 0;
              background: #ededed;
              i:first-child {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 20px;
                height: 20px;
                margin-top: -10px;
                margin-left: -10px;
                background: #ffffff;
              }
              i:last-child {
                position: absolute;
                top: 50%;
                left: 50%;
                box-sizing: border-box;
                width: 8px;
                height: 8px;
                margin-top: -4px;
                margin-left: -4px;
                border: 1px solid #7197f8;
                transform: rotate(45deg);
              }
            }
            span {
              font-size: 14px;
              font-weight: 400;
              color: #5378f6;
              text-align: center;
            }
            span:last-child {
              margin-top: 8px;
            }
          }
          li:nth-child(2) {
            margin-left: 30px;
          }
          .active {
            span:first-child {
              color: rgb(115 216 151);
              border: 1px solid rgb(115 216 151);
            }
            .line {
              i:last-child {
                background: rgb(115 216 151);
                border: 1px solid rgb(115 216 151);
              }
            }
            span {
              color: rgb(115 216 151);
            }
          }
        }
      }
    }
  }
  .summary-right {
    box-sizing: border-box;
    flex: 0 0 370px;
    margin-left: 10px;
    overflow: hidden;
    background: #ffffff;
    .summary-right-project {
      padding: 30px;
      border-bottom: 1px solid #eeeeee;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        span:first-child {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
        }
        p {
          display: flex;
          span {
            display: flex;
            align-items: center;
            cursor: pointer;
          }

          // span:first-child {
          //   margin-right: 20px;
          // }
          i {
            margin-left: 8px;
            font-weight: 400;
          }
        }
      }
      .status {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        span:first-child {
          margin-right: 20px;
        }
        span:last-child {
          padding: 2px 12px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;

          // background: #74d98c;
          border-radius: 16px;
        }
        .green {
          background: #74d98c;
        }
        .red {
          background: #e25e72;
        }
        .yellow {
          background: #f8d27c;
        }
      }
      .description {
        display: flex;
        flex-flow: column wrap;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        span:first-child {
          margin-bottom: 20px;
        }
        span:last-child {
          width: 100%;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          word-break: break-all;
          word-wrap: break-word;
        }
      }
    }
    .summary-right-total {
      padding: 30px;
      .total-tit {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
      .total-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 8px;
        margin-top: 20px;
        p {
          display: flex;
          flex-flow: column nowrap;
          span:first-child {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          span:last-child {
            margin-top: 9px;
            font-size: 24px;
            font-weight: 400;
            color: #333333;
          }
          .complate-rate {
            color: #74d98c !important;
          }
          .delay-rate {
            color: #e25e72 !important;
          }
        }
      }
    }
  }
}
</style>
